import React, {useRef} from 'react';
import {useSortable} from '@dnd-kit/sortable';
import './index.css';
import {CSS} from '@dnd-kit/utilities';

const styleBox = {
  minHeight: 50,
  cursor: 'move',
  border: '1px solid'
};
const bacRed = {
  backgroundColor: 'red'
};

const bacGreen = {
  backgroundColor: 'Green'
};

export function SortableItem(props) {
  const a = useSortable(
    {
      id: props.id || props.item.id,
      data: {
        index: props.index,
        parentIndex: props.parentIndex,
        data: props.item
      }
    }
  );
  const {
    attributes,
    listeners,
    transition,
    setNodeRef,
    index,
    over,
    transform
  } = a;
  const style = {
    ...styleBox,
    transition,
    transform: CSS.Translate.toString(transform)
  };

  function c() {
    return over?.id === props.id ? 'identifying' : undefined;
  }

  return (
    <div
      ref={setNodeRef}
      style={{...style, backgroundColor: props.id}}
      className={c()}
      {...listeners}
      {...attributes}
    >
      {props.children}
    </div>

  );
}
